`<template>
	<view class="container">
		<view class="page-body uni-content-info">
			<view class='cropper-content'>
				<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
					<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
						<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
						<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
						    :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
							<view class="uni-cropper-view-box">
								<view class="uni-cropper-dashed-h"></view>
								<view class="uni-cropper-dashed-v"></view>
								<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
								<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
								<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
								<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='cropper-config'>
				<button type="primary reverse" @click="getImage" style='margin-top: 30upx;'> 重新选择图片 </button>
				<button type="warn" @click="getImageInfo" style='margin-top: 30upx;'> 确认剪裁图片 </button>
			</view>
			<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
		</view>
		<!-- <page-foot :name="name"></page-foot> -->
	</view>
</template>

<script>
let sysInfo = uni.getSystemInfoSync();
let SCREEN_WIDTH = sysInfo.screenWidth;
let PAGE_X, // 手按下的x位置
    PAGE_Y, // 手按下y的位置
    PR = sysInfo.pixelRatio, // dpi
    T_PAGE_X, // 手移动的时候x的位置
    T_PAGE_Y, // 手移动的时候Y的位置
    CUT_L, // 初始化拖拽元素的left值
    CUT_T, // 初始化拖拽元素的top值
    CUT_R, // 初始化拖拽元素的
    CUT_B, // 初始化拖拽元素的
    CUT_W, // 初始化拖拽元素的宽度
    CUT_H, //  初始化拖拽元素的高度
    IMG_RATIO, // 图片比例
    IMG_REAL_W, // 图片实际的宽度
    IMG_REAL_H, // 图片实际的高度
    DRAFG_MOVE_RATIO = 1, //移动时候的比例,
    INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
    DRAW_IMAGE_W = sysInfo.screenWidth; // 设置生成的图片宽度
var util = require('@/common/util.js');

export default {
    /**
     * 页面的初始数据
     */
    data() {
        return {
            name: '杨大宝',
            imageSrc: 'https://img-cdn-qiniu.dcloud.net.cn/demo_crop.jpg',
            isShowImg: false,
            // 初始化的宽高
            cropperInitW: SCREEN_WIDTH,
            cropperInitH: SCREEN_WIDTH,
            // 动态的宽高
            cropperW: SCREEN_WIDTH,
            cropperH: SCREEN_WIDTH,
            // 动态的left top值
            cropperL: 0,
            cropperT: 0,

            transL: 0,
            transT: 0,

            // 图片缩放值
            scaleP: 0,
            imageW: 0,
            imageH: 0,

            // 裁剪框 宽高
            cutL: 0,
            cutT: 0,
            cutB: SCREEN_WIDTH,
            cutR: '100%',
            qualityWidth: DRAW_IMAGE_W,
            innerAspectRadio: DRAFG_MOVE_RATIO,
            type: '',
            userInfoEditParams: {
                avatar: '',
                name: '',
                areaId: '',
                token: util.getUserToken()
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        this.imageSrc = options.filePath;
        this.type = options.type;
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    mounted: function() {
        this.loadImage();
    },
    methods: {
        setData: function(obj) {
            let that = this;
            Object.keys(obj).forEach(function(key) {
                that.$set(that.$data, key, obj[key]);
            });
        },
        getImage: function() {
            var _this = this;
            uni.chooseImage({
                success: function(res) {
                    _this.setData({
                        imageSrc: res.tempFilePaths[0]
                    });
                    _this.loadImage();
                }
            });
        },
        loadImage: function() {
            var _this = this;
            uni.showLoading({
                title: '图片加载中...'
            });

            uni.getImageInfo({
                src: _this.imageSrc,
                success: function success(res) {
                    IMG_RATIO = res.width / res.height;
                    if (IMG_RATIO >= 1) {
                        IMG_REAL_W = SCREEN_WIDTH;
                        IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO;
                    } else {
                        IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO;
                        IMG_REAL_H = SCREEN_WIDTH;
                    }
                    let need_size = 200;
                    need_size = Math.min(need_size, IMG_REAL_W, IMG_REAL_H);

                    let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H;
                    INIT_DRAG_POSITION =
                        minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange;
                    // 根据图片的宽高显示不同的效果   保证图片可以正常显示
                    if (IMG_RATIO >= 1) {
                        // console.log('1-in');
                        let cutT = Math.ceil((IMG_REAL_H - need_size) / 2);
                        let cutB = cutT;
                        let cutL = Math.ceil((SCREEN_WIDTH - need_size) / 2);
                        let cutR = cutL;
                        _this.setData({
                            cropperW: SCREEN_WIDTH,
                            cropperH: SCREEN_WIDTH / IMG_RATIO,
                            // 初始化left right
                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
                            cutL: cutL,
                            cutT: cutT,
                            cutR: cutR,
                            cutB: cutB,
                            // 图片缩放值
                            imageW: IMG_REAL_W,
                            imageH: IMG_REAL_H,
                            scaleP: IMG_REAL_W / SCREEN_WIDTH,
                            qualityWidth: DRAW_IMAGE_W,
                            innerAspectRadio: IMG_RATIO
                        });
                    } else {
                        // console.log('2-in');
                        let cutL = Math.ceil((IMG_REAL_W - need_size) / 2);
                        let cutR = cutL;
                        let cutT = Math.ceil((SCREEN_WIDTH - need_size) / 2);
                        let cutB = cutT;
                        _this.setData({
                            cropperW: SCREEN_WIDTH * IMG_RATIO,
                            cropperH: SCREEN_WIDTH,
                            // 初始化left right
                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),

                            cutL: cutL,
                            cutT: cutT,
                            cutR: cutR,
                            cutB: cutB,
                            // 图片缩放值
                            imageW: IMG_REAL_W,
                            imageH: IMG_REAL_H,
                            scaleP: IMG_REAL_W / SCREEN_WIDTH,
                            qualityWidth: DRAW_IMAGE_W,
                            innerAspectRadio: IMG_RATIO
                        });
                    }
                    _this.setData({
                        isShowImg: true
                    });
                    uni.hideLoading();
                }
            });
        },
        // 拖动时候触发的touchStart事件
        contentStartMove(e) {
            PAGE_X = e.touches[0].pageX;
            PAGE_Y = e.touches[0].pageY;
        },

        // 拖动时候触发的touchMove事件
        contentMoveing(e) {
            var _this = this;
            var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
            var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
            // 左移
            if (dragLengthX > 0) {
                if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL;
            } else {
                if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR;
            }

            if (dragLengthY > 0) {
                if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT;
            } else {
                if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB;
            }
            this.setData({
                cutL: this.cutL - dragLengthX,
                cutT: this.cutT - dragLengthY,
                cutR: this.cutR + dragLengthX,
                cutB: this.cutB + dragLengthY
            });

            PAGE_X = e.touches[0].pageX;
            PAGE_Y = e.touches[0].pageY;
        },

        contentTouchEnd() {},

        // 获取图片
        getImageInfo() {
            var _this = this;
            uni.showLoading({
                title: '图片生成中...'
            });
            // 将图片写入画布
            const ctx = uni.createCanvasContext('myCanvas');
            ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
            ctx.draw(true, () => {
                // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
                var canvasW =
                    ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
                var canvasH =
                    ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
                var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
                var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;
                uni.canvasToTempFilePath({
                    x: canvasL,
                    y: canvasT,
                    width: canvasW,
                    height: canvasH,
                    destWidth: canvasW,
                    destHeight: canvasH,
                    quality: 0.5,
                    canvasId: 'myCanvas',
                    success: function(res) {
                        uni.hideLoading();
                        // 成功获得地址的地方
                        uni.showLoading({
                            title: '上传中...'
                        });
                        _this.upload_file(res.tempFilePath);
                        //                         uni.previewImage({
                        //                             current: '', // 当前显示图片的http链接
                        //                             urls: [res.tempFilePath] // 需要预览的图片http链接列表
                        //                         });
                        //
                        let pages = getCurrentPages(); //当前页面
                        let prevPage = pages[pages.length - 2]; //上一页面
                        prevPage.setData({
                            //直接给上移页面赋值
                            userLogo: res.tempFilePath
                        });
                    }
                });
            });
        },
        upload_file(filePath) {
            uni.uploadFile({
                url: util.getDomain() + 'file.upload',
                filePath: filePath,
                name: 'userfile',
                formData: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: res => {
                    // console.log(res);
                    if (res.statusCode === 200) {
                        let data = JSON.parse(res.data);
                        // console.log(data.data);
                        if ('modifyAvatar' === this.type) {
                            this.userInfoEditParams.avatar = data.data;
                            this.userInfoEdit();
                           
                        }
                    }
                }
            });
        },

        userInfoEdit() {
            util.ajax(
                'userInfoEdit',
                this.userInfoEditParams,
                data => {
                    let json = data.data;
                    if (json.status) {
						uni.showToast({
							title: '头像更改成功',
							icon: 'none',
							duration: 1000
						});
                        uni.navigateBack({
                            delta: 1
                        });
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },

        // 设置大小的时候触发的touchStart事件
        dragStart(e) {
			if(true) return;
            T_PAGE_X = e.touches[0].pageX;
            T_PAGE_Y = e.touches[0].pageY;
            CUT_L = this.cutL;
            CUT_R = this.cutR;
            CUT_B = this.cutB;
            CUT_T = this.cutT;
        },

        // 设置大小的时候触发的touchMove事件
        dragMove(e) {
			if(true) return;
            var _this = this;
            var dragType = e.target.dataset.drag;
            switch (dragType) {
                case 'right':
                    var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
                    if (CUT_R + dragLength < 0) dragLength = -CUT_R;
                    this.setData({
                        cutR: CUT_R + dragLength
                    });
                    break;
                case 'left':
                    var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
                    if (CUT_L - dragLength < 0) dragLength = CUT_L;
                    if (CUT_L - dragLength > this.cropperW - this.cutR)
                        dragLength = CUT_L - (this.cropperW - this.cutR);
                    this.setData({
                        cutL: CUT_L - dragLength
                    });
                    break;
                case 'top':
                    var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
                    if (CUT_T - dragLength < 0) dragLength = CUT_T;
                    if (CUT_T - dragLength > this.cropperH - this.cutB)
                        dragLength = CUT_T - (this.cropperH - this.cutB);
                    this.setData({
                        cutT: CUT_T - dragLength
                    });
                    break;
                case 'bottom':
                    var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
                    if (CUT_B + dragLength < 0) dragLength = -CUT_B;
                    this.setData({
                        cutB: CUT_B + dragLength
                    });
                    break;
                case 'rightBottom':
                    var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
                    var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;

                    if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B;
                    if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R;
                    let cutB = CUT_B + dragLengthY;
                    let cutR = CUT_R + dragLengthX;

                    this.setData({
                        cutB: cutB,
                        cutR: cutR
                    });
                    break;
                default:
                    break;
            }
        }
    }
};
</script>

<style>
/* pages/uni-cropper/index.wxss */

.uni-content-info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    align-items: center;
    flex-direction: column;
}

.cropper-config {
    padding: 20upx 40upx;
    flex-direction: column;
}

.cropper-content {
    min-height: 750upx;
    width: 100%;
}

.uni-corpper {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    box-sizing: border-box;
}

.uni-corpper-content {
    position: relative;
}

.uni-corpper-content image {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: none !important;
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    image-orientation: 0deg !important;
    margin: 0 auto;
}
/* 移动图片效果 */

.uni-cropper-drag-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: move;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
/* 内部的信息 */

.uni-corpper-crop-box {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.uni-corpper-crop-box .uni-cropper-view-box {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    outline: 1upx solid #69f;
    outline-color: rgba(102, 153, 255, 0.75);
}
/* 横向虚线 */

.uni-cropper-dashed-h {
    position: absolute;
    top: 33.33333333%;
    left: 0;
    width: 100%;
    height: 33.33333333%;
    border-top: 1upx dashed rgba(255, 255, 255, 0.5);
    border-bottom: 1upx dashed rgba(255, 255, 255, 0.5);
}
/* 纵向虚线 */

.uni-cropper-dashed-v {
    position: absolute;
    left: 33.33333333%;
    top: 0;
    width: 33.33333333%;
    height: 100%;
    border-left: 1upx dashed rgba(255, 255, 255, 0.5);
    border-right: 1upx dashed rgba(255, 255, 255, 0.5);
}
/* 四个方向的线  为了之后的拖动事件*/

.uni-cropper-line-t {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #69f;
    top: 0;
    left: 0;
    height: 1upx;
    opacity: 0.1;
    cursor: n-resize;
}

.uni-cropper-line-t::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0upx;
    width: 100%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    bottom: 0;
    height: 41upx;
    background: transparent;
    z-index: 11;
}

.uni-cropper-line-r {
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    right: 0upx;
    width: 1upx;
    opacity: 0.1;
    height: 100%;
    cursor: e-resize;
}

.uni-cropper-line-r::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 41upx;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    bottom: 0;
    height: 100%;
    background: transparent;
    z-index: 11;
}

.uni-cropper-line-b {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #69f;
    bottom: 0;
    left: 0;
    height: 1upx;
    opacity: 0.1;
    cursor: s-resize;
}

.uni-cropper-line-b::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0upx;
    width: 100%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    bottom: 0;
    height: 41upx;
    background: transparent;
    z-index: 11;
}

.uni-cropper-line-l {
    position: absolute;
    display: block;
    background-color: #69f;
    top: 0;
    left: 0;
    width: 1upx;
    opacity: 0.1;
    height: 100%;
    cursor: w-resize;
}

.uni-cropper-line-l::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 41upx;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    bottom: 0;
    height: 100%;
    background: transparent;
    z-index: 11;
}

.uni-cropper-point {
    width: 5upx;
    height: 5upx;
    background-color: #69f;
    opacity: 0.75;
    position: absolute;
    z-index: 3;
}

.point-t {
    top: -3upx;
    left: 50%;
    margin-left: -3upx;
    cursor: n-resize;
}

.point-tr {
    top: -3upx;
    left: 100%;
    margin-left: -3upx;
    cursor: n-resize;
}

.point-r {
    top: 50%;
    left: 100%;
    margin-left: -3upx;
    margin-top: -3upx;
    cursor: n-resize;
}

.point-rb {
    left: 100%;
    top: 100%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    cursor: n-resize;
    width: 36upx;
    height: 36upx;
    background-color: #69f;
    position: absolute;
    z-index: 1112;
    opacity: 1;
}

.point-b {
    left: 50%;
    top: 100%;
    margin-left: -3upx;
    margin-top: -3upx;
    cursor: n-resize;
}

.point-bl {
    left: 0%;
    top: 100%;
    margin-left: -3upx;
    margin-top: -3upx;
    cursor: n-resize;
}

.point-l {
    left: 0%;
    top: 50%;
    margin-left: -3upx;
    margin-top: -3upx;
    cursor: n-resize;
}

.point-lt {
    left: 0%;
    top: 0%;
    margin-left: -3upx;
    margin-top: -3upx;
    cursor: n-resize;
}
/* 裁剪框预览内容 */

.uni-cropper-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.uni-cropper-viewer image {
    position: absolute;
    z-index: 2;
}
</style>
